<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style type="text/css">
			table {
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container-fluid">
			<form>
				<div class="form-group">
					<label>名称</label>
					<input type="text" class="form-control" v-model="name" placeholder="名称">
				</div>
				<div class="form-group">
					<label>价格</label>
					<input type="text" class="form-control" v-model="price" placeholder="价格">
				</div>
				<button type="submit" class="btn btn-default" @click.prevent="save">保存</button>
				<button type="submit" class="btn btn-success" @click.prevent="query">查询</button>
			</form>
			<course-list :course="abc" @del="dd"></course-list>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="js/course-list.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					name: '',
					price: 0,
					course: [{
						"id": 7749,
						"name": "html",
						"price": "999"
					}, {
						"id": 6301,
						"name": "js",
						"price": "555"
					}, {
						"id": 9427,
						"name": "jquery",
						"price": "1000"
					}, {
						"id": 1899,
						"name": "css",
						"price": "111"
					}],
					fcourse: []
				},
				computed: {
					abc() {
						console.log("1111111111111111111")
						let items = this.course;
						return items;
					}
				},
				methods: {
					save() {
						let c = {
							id: Math.ceil(Math.random() * 10000),
							name: this.name,
							price: this.price
						}
						this.course.unshift(c);
					},
					dd(id, index) {
						console.log("333333333333333333333")
						console.log(index);
						console.log(id)
						console.log("333333333333333333333")
						this.course.splice(index, 1);
					},
					query() {
						let items = null;
						if (this.name) {
							this.fcourse = this.course;
							items = this.course.filter(val => {
								return val.name.includes(this.name)
							});
							this.course = items;
						}else{
							this.course = this.fcourse;
							
						}
					}
				},
			})
		</script>
	</body>
</html>
